<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })" v-model="isShowDialog" :size="px2vw('842px')">
    <template #header>
      <div class="flex-center font-bold pl-[12px]">详情</div>
    </template>

    <div class="pl-[12px]">
      <div class="w-[100%] flex flex-wrap info">
        <div class="w-[50%] flex item h-[45px]"
             v-for="(item,index) in config"
             :key="index"
        >
          <div class="label w-[134px]  bg-[#FAFAFA] h-[100%] flex-center">{{ item.label }}</div>
          <div class="value w-[254px] pl-[25px] flex items-center">sfas78fwsehfiwp</div>
        </div>
      </div>


      <div class="mt-[40px]">全部订单信息 >></div>

      <div class="w-[777px] bg-[#FAFAFA] rounded-[8px] mt-[4px] px-[16px] py-[16px]">
        <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleBtnClick">
          <el-tab-pane :label="item.name" :name="item.code"
                       v-for="(item,index) in tabs"
                       :key="index"
          >

            <QueryTable
              v-if="item.code == 'info'"
              :list="dataListInfo"
              :total="total"
              @execute="handleBtnClick"
              :thead="thInfo"
              v-model="queryParams"
              :show-action="false"
              :show-section="false"
              :show-expand="false"
              pk="id"
            >
              <template #name="{row}">
                <div class="flex">
                  <ImagePreview :src="row.cover" :width="38" :height="38"/>
                  <div class="ml-[10px]">
                    <div class="text-[#3721FF]" style="text-align: left">{{ row.name }}</div>
                    <div class="mt-[3px] text-[#999999]">ID:{{ row.productId }}</div>
                  </div>
                </div>

              </template>
            </QueryTable>

            <QueryTable
              v-if="item.code == 'record'"
              :list="dataListRecord"
              :total="total"
              @execute="handleBtnClick"
              :thead="thRecord"
              v-model="queryParams"
              :show-action="false"
              :show-section="false"
              :show-expand="false"
              pk="id"
            />

            <QueryTable
              v-if="item.code == 'link'"
              :list="dataListLink"
              :total="total"
              @execute="handleBtnClick"
              :thead="thLink"
              v-model="queryParams"
              :show-action="false"
              :show-section="false"
              :show-expand="true"
              pk="id"
            >
              <template #name="{row}">
                <div class="flex">
                  <ImagePreview :src="row.cover" :width="38" :height="38"/>
                  <div class="ml-[10px]">
                    <div class="text-[#3721FF]" style="text-align: left">{{ row.name }}</div>
                    <div class="mt-[3px] text-[#999999]">ID:{{ row.productId }}</div>
                  </div>
                </div>

              </template>

              <template #expand="{row}">
                <div class="pl-[100px]" >
                  <div v-for="(item,index) in row.list || []" :key="index" class="flex items-centerx" :class="index == 0 ? '' : 'mt-[15px]'">
                    <div class="mr-[35px]">
                      <div>采购链接：</div>
                      <div class="w-[400px] text-[#3721FF]" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item.link }}</div>
                    </div>

                    <div>备注：{{ item.remark }}</div>
                  </div>
                </div>
              </template>
            </QueryTable>

          </el-tab-pane>

        </el-tabs>

      </div>
    </div>


    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>
      </div>
    </template>

  </el-drawer>
</template>
<script setup lang="ts">
import {px2vw} from "@/utils";
import QueryTable from "@/components/TableData/index.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import ImagePreview from "@/components/ImagePreview/index.vue"
import {confirmPromote} from "@/utils";


const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  }
})

const emit = defineEmits(['update:modelValue', 'confirm']);

const isShowDialog = ref(false);

const queryParams = ref({
  pageNo: 1, pageSize: 10
})

const config = ref([
  {
    label: "采购订单"
  },
  {
    label: "入库仓库"
  },
  {
    label: "供应商名称"
  },
  {
    label: "物流单号"
  },
  {
    label: "采购渠道"
  },
  {
    label: "渠道订单号"
  },
  {
    label: "采购员"
  },
  {
    label: "采购金额"
  },
  {
    label: "采购时间"
  },
  {
    label: "线上订单号"
  },
  {
    label: "采购链接"
  },
  {
    label: "备注"
  }
])

const tabs = ref([
  {
    name: "商品信息",
    code: "info"
  },
  {
    name: "入库记录",
    code: "record"
  },
  {
    name: "采购链接",
    code: "link"
  }
])
const activeTab = ref(tabs.value[0].code);

const dataListInfo = ref([
  {
    id: 1,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },
  {
    id: 3,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },
  {
    id: 2,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },

])
const total = ref(0)
const thInfo = ref([
  {
    name: '商品名称/ID',
    code: 'name',
    type: 'numberRanger',
    search: true,
    width: "200px"
  },
  {
    name: 'sku',
    code: 'sku',
    type: 'numberRanger',
    search: true
  },
  {
    name: '属性',
    code: 'spec',
    type: 'numberRanger',
    search: true
  },
  {
    name: '采购单价（￥）',
    code: 'price',
    type: 'numberRanger',
    search: true
  },
  {
    name: '采购数量（件）',
    code: 'order',
    type: 'numberRanger',
    search: true
  },
])

const thRecord = ref([
  {
    name: '属性',
    code: 'spec',
    type: 'numberRanger',
    search: true,
    width: "200px"
  },
  {
    name: 'sku',
    code: 'sku',
    type: 'numberRanger',
    search: true
  },

  {
    name: '商品名称',
    code: 'name',
    type: 'numberRanger',
    search: true
  },
  {
    name: '入库数量',
    code: 'quantity',
    type: 'numberRanger',
    search: true
  },

  {
    name: '入库时间',
    code: 'createdTime',
    type: 'numberRanger',
    search: true
  },
  {
    name: '操作者',
    code: 'createdTor',
    type: 'numberRanger',
    search: true
  },
])
const dataListRecord = ref([
  {
    id: 1,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },
  {
    id: 3,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },
  {
    id: 2,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
  },

])

const thLink = ref([
  {
    name: '商品名称',
    code: 'name',
    type: 'numberRanger',
    search: true,
    width: "200px"
  },
  {
    name: '创建部门',
    code: 'department',
    type: 'numberRanger',
    search: true
  },

  {
    name: '创建者',
    code: 'creator',
    type: 'numberRanger',
    search: true
  },

])
const dataListLink = ref([
  {
    id: 1,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
    list:[
      {
        link:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01CZuIXr2Ipwjgjom40_!!801089336.png",
        remark:"1111"
      },
      {
        link:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01CZuIXr2Ipwjgjom40_!!801089336.png",
        remark:"1111"
      },
      {
        link:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01CZuIXr2Ipwjgjom40_!!801089336.png",
        remark:"1111"
      }
    ]
  },
  {
    id: 3,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
    list:[
      {
        link:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01CZuIXr2Ipwjgjom40_!!801089336.png",
        remark:"1111"
      },

    ]
  },
  {
    id: 2,
    name: "商品名称",
    productId: "20201109160037",
    cover: "https://img.alicdn.com/imgextra/i2/801089336/O1CN01S6LuPB2IpwjWrPUYG_!!801089336.png",
    sku: "260037",
    spec: "XL",
    color: "橘色",
    price: "0.00",
    quantity: "6",
    list:[
      {
        link:"https://img.alicdn.com/imgextra/i1/801089336/O1CN01CZuIXr2Ipwjgjom40_!!801089336.png",
        remark:"1111"
      },

    ]
  },

])

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}

const fn = {
  add({index}) {
    dataList.value[index].list.push({
      link: "",
      remark: "",
      isEdit: true
    })
  },
  async delItem({index, idx}) {
    await confirmPromote({
      content: "是否删除该采购链接？"
    })
    dataList.value[index].list.splice(idx, 1);
  },
  close() {

    emit('update:modelValue', false)
  },
  confirm() {
    fn.close();
    emit('confirm', {
      type: 'purchaseConfirm', data: {
        dataList: dataList.value,
        info: props.info
      }
    })
  }
}

watch(() => props.modelValue, () => {
  isShowDialog.value = props.modelValue;
})

</script>
<style lang="scss" scoped>
.info {
  border: solid 1px #F3F3F3;
  border-radius: 8px;
  overflow: hidden;

  .item {
    border-bottom: solid 1px #F3F3F3;
    border-right: solid 1px #F3F3F3;

    &:nth-last-of-type(1), &:nth-last-of-type(2) {
      border-bottom: solid 0px #F3F3F3;
    }

    &:nth-of-type(2n) {
      border-right: solid 0px #F3F3F3;
    }


  }
}
</style>
